<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg-cover-image-table</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0px;
      padding: 0px;
    }
    #svg-container {
      border: 1px solid #eee;
      margin-top: 20px;
      background-color: #f9f9f9;
      background-image: url("");
      background-repeat: no-repeat;  
  }
    .table-boundary {
      fill: none;
      stroke: greenyellow;
      stroke-width: 3;
    }
    .grid-line {
      stroke: greenyellow;
      stroke-width: 3;
    }
    .cell-polygon {
      fill: transparent;
      stroke: transparent;
      stroke-width: 2;
      cursor: pointer;
      transition: stroke 0.2s;
    }
    .cell-polygon.selected {
      stroke: #1890ff;
      stroke-width: 4;
      filter: drop-shadow(0 0 3px rgba(24, 144, 255, 0.3));
    }
    .cell-polygon:hover:not(.selected) {
      stroke: #69c0ff;
      stroke-width: 2;
    }
    #selection-info {
      margin-top: 15px;
      padding: 12px;
      background: #f5f5f5;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .info-title {
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }
    .info-content {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div id="svg-container"></div>
  <div id="selection-info">
    <div class="info-title">当前选择状态</div>
    <div class="info-content">未选择任何单元格</div>
  </div>

  <script>
    // 完整物理表格数据
    const physicTable = {
      "rect_boundary": {
        "left_top": [156, 602],
        "right_bottom": [1486, 2109]
      },
      "vertical_line_list": [
        [[569, 602], [569, 2109]],
        [[1027, 602], [1027, 2109]]
      ],
      "horizontal_line_list": [
        [[156, 658], [1486, 658]],
        [[156, 713], [1486, 713]],
        [[156, 770], [1486, 770]],
        [[156, 825], [1486, 825]],
        [[156, 882], [1486, 882]],
        [[156, 937], [1486, 937]],
        [[156, 991], [1486, 994]],
        [[156, 1048], [1486, 1048]],
        [[156, 1104], [1486, 1104]],
        [[156, 1160], [1486, 1160]],
        [[156, 1216], [1486, 1216]],
        [[156, 1272], [1486, 1272]],
        [[156, 1328], [1486, 1328]],
        [[156, 1384], [1486, 1384]],
        [[156, 1439], [1486, 1439]],
        [[156, 1495], [1486, 1495]],
        [[156, 1551], [1486, 1551]],
        [[156, 1607], [1486, 1607]],
        [[156, 1663], [1486, 1663]],
        [[156, 1719], [1486, 1719]],
        [[156, 1775], [1486, 1775]],
        [[156, 1827], [1486, 1830]],
        [[156, 1887], [1486, 1887]],
        [[156, 1942], [1486, 1942]],
        [[156, 1997], [1486, 1999]],
        [[156, 2053], [1486, 2053]]
      ]
    };

    // 初始化SVG画布（根据表格尺寸自动调整）
    const boundary = physicTable.rect_boundary;
    const svgWidth = boundary.right_bottom[0] + 100;
    const svgHeight = boundary.right_bottom[1] + 100;
    const draw = SVG().addTo('#svg-container').size(svgWidth, svgHeight);
    
    let selectedCell = null;

    // 绘制表格基础结构
    function renderTableStructure() {
      // 绘制表格外边框
      const tableWidth = boundary.right_bottom[0] - boundary.left_top[0];
      const tableHeight = boundary.right_bottom[1] - boundary.left_top[1];
      
      draw.rect(tableWidth, tableHeight)
        .move(boundary.left_top[0], boundary.left_top[1])
        .addClass('table-boundary')
        .back(); // 确保在最底层

      // 绘制垂直线
      physicTable.vertical_line_list.forEach(line => {
        draw.line(line[0][0], line[0][1], line[1][0], line[1][1])
          .addClass('grid-line');
      });

      // 绘制水平线
      physicTable.horizontal_line_list.forEach(line => {
        draw.line(line[0][0], line[0][1], line[1][0], line[1][1])
          .addClass('grid-line');
      });
    }

    // 创建所有可交互单元格
    function createInteractiveCells() {
      // 收集所有分割线坐标（包括边界）
      const verticalLines = [
        boundary.left_top[0], 
        ...physicTable.vertical_line_list.map(line => line[0][0]), 
        boundary.right_bottom[0]
      ];
      
      const horizontalLines = [
        boundary.left_top[1], 
        ...physicTable.horizontal_line_list.map(line => line[0][1]), 
        boundary.right_bottom[1]
      ];

      // 创建单元格网格
      for (let col = 0; col < verticalLines.length - 1; col++) {
        for (let row = 0; row < horizontalLines.length - 1; row++) {
          createCellPolygon(col, row, verticalLines, horizontalLines);
        }
      }
    }

    // 创建单个单元格多边形
    function createCellPolygon(col, row, verticalLines, horizontalLines) {
      const x1 = verticalLines[col];
      const y1 = horizontalLines[row];
      const x2 = verticalLines[col + 1];
      const y2 = horizontalLines[row + 1];
      
      // 单元格ID格式：cell-列号-行号
      const cellId = `cell-${col}-${row}`;
      
      // 创建多边形（矩形）
      const polygon = draw.polygon([
        [x1, y1], [x2, y1], [x2, y2], [x1, y2]
      ])
      .addClass('cell-polygon')
      .attr('id', cellId)
      .attr('data-col', col)
      .attr('data-row', row)
      .on('click', function() {
        handleCellClick(this, col, row);
      });
    }

    // 处理单元格点击事件
    function handleCellClick(polygon, col, row) {
      // 点击已选中的单元格则取消选择
      if (selectedCell && selectedCell.id === polygon.id()) {
        polygon.removeClass('selected');
        selectedCell = null;
        updateSelectionInfo(null);
        return;
      }

      // 清除之前的选择
      if (selectedCell) {
        draw.find(`#${selectedCell.id}`).removeClass('selected');
      }

      // 设置新选择
      polygon.addClass('selected');
      selectedCell = {
        id: polygon.id(),
        element: polygon,
        col: col,
        row: row
      };

      // 更新选中信息
      updateSelectionInfo(col, row);
    }

    // 更新选中信息显示
    function updateSelectionInfo(col, row) {
      const infoContent = document.querySelector('#selection-info .info-content');
      
      if (col === undefined || row === undefined) {
        infoContent.textContent = "未选择任何单元格";
        return;
      }

      // 计算单元格位置和尺寸
      const verticalLines = [
        boundary.left_top[0], 
        ...physicTable.vertical_line_list.map(line => line[0][0]), 
        boundary.right_bottom[0]
      ];
      const horizontalLines = [
        boundary.left_top[1], 
        ...physicTable.horizontal_line_list.map(line => line[0][1]), 
        boundary.right_bottom[1]
      ];
      
      const left = verticalLines[col];
      const top = horizontalLines[row];
      const width = verticalLines[col + 1] - left;
      const height = horizontalLines[row + 1] - top;
      
      infoContent.innerHTML = `
        <div><strong>位置：</strong>第 ${row + 1} 行，第 ${col + 1} 列</div>
        <div><strong>坐标：</strong>(${left}, ${top})</div>
        <div><strong>尺寸：</strong>${width} × ${height} 像素</div>
        <div><strong>单元格ID：</strong>cell-${col}-${row}</div>
      `;
    }

    // 初始化表格渲染
    function initTable() {
      renderTableStructure();
      createInteractiveCells();
      
      // 初始选中第一个单元格（可选）
      // const firstCell = draw.find('#cell-0-0');
      // if (firstCell) {
      //   handleCellClick(firstCell, 0, 0);
      // }
    }

    // 启动表格渲染
    initTable();
  </script>
</body>
</html>